@tailwind base;

@tailwind components;

.section {
  @apply w-full p-6;
}

.section-title {
  @apply w-48 mx-auto pt-6 border-b-2 border-orange-500 text-center text-2xl text-blue-700;
}

.section-subtitle {
  @apply p-2 text-center text-lg text-gray-700;
}

.card {
  @apply w-48 m-4 py-2 bg-white shadow-lg;
}

.card-image {
  @apply w-24 h-24 mx-auto rounded-full;
}

.card-title {
  @apply mx-2 mt-2 text-center text-lg text-gray-700 font-semibold;
}

.card-subtitle {
  @apply text-center text-gray-600;
}

.card-icons {
  @apply flex justify-center items-center mt-2;
}

.card-icon {
  @apply mx-1 text-blue-500 cursor-pointer;
}

.card-icon:hover {
  @apply text-orange-500;
}

@tailwind utilities;

.rotate-45 {
  transform: rotate(45deg);
}
.-rotate-45 {
  transform: rotate(-45deg);
}
.-skewx-20 {
  transform: skewX(-20deg);
}